<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        .box{
            padding: 50px;
            width: 1200px;
            margin: auto;
        }
        .title{
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 13px;
            color: white;
            position: absolute;
            top: -15px;
            left: 10px;
            background-color: black;
        }
        .forma{
            width: 450px;
            line-height: 40px;
            padding: 30px 0;
            padding-left: 35px;

            position: relative;
            border: 2px red solid;
            border-radius: 10px;
            float: left;
        }
        .tiShi{
            color: red;
            background-color: yellow;
            width: 250px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-left: 20px;
            float: left;
        }
    </style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="1200" align="center">
    <tbody>
    <tr>
        <th>
            <input type="checkbox" class="selAll">全选
        </th>
        <th>商品编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>上货日期</th>
        <th>是否下架</th>
        <th>操作</th>
    </tr>
    </tbody>
</table>
<div class="box">
    <div class="forma">
        <div class="title">商品添加</div>
        商品编号：<input type="text" id="productId"><br>
        商品名称：<input type="text" id="productName"><br>
        商品价格：<input type="text" id="productPrice"><br>
        上货日期：
        <select id="year">
        </select>
        <select id="month">
        </select>
        <select id="day">
        </select><br>
        是否下架：<input type="radio" checked id="yes" name="isUp" value="是">是
        <input type="radio" id="no" name="isUp" value="否">否<br>
        <input type="button" value="添加" class="addUpdate">
        <input type="button" value="批量删除" class="delMore">
    </div>
    <div class="tiShi">双击表单，添加数据</div>
</div>
<script>
    //初始化年份
    function initYear(){
        //获取到当前日期
        var now = new Date();
        //根据当前日期获取当前年份
        var year = now.getFullYear();

        //循环创建option节点并添加到select节点中
        for(i = year-10;i <= year+10;i++){
            $("#year").append("<option>"+i+"</option>");
        }
        //页面加载时，希望年份默认选择当前年份
        $("#year option").filter(function(){
            return $(this).text() == year;
        }).prop("selected",true);
    }

    //初始化月份
    function initMonth(){
        //获取到当前日期
        var now = new Date();
        //根据当前日期获取当前年份
        var month = now.getMonth()+1;

        //循环创建option节点并添加到select节点中
        for(i = 1;i <= 12;i++){
            $("#month").append("<option>"+ (i < 10 ? '0'+i : i) +"</option>");
        }
        //页面加载时，希望年份默认选择当前年份
        $("#month option").filter(function(){
            return $(this).text() == month;
        }).prop("selected",true);
    }

    //初始化日期
    function initDay(year,month){
        //获取到当前日期
        var now = new Date();
        //根据当前日期获取当前年份
        var nowDay = now.getDate();
        nowDay = nowDay < 10 ? "0" + nowDay : nowDay;
        var day = 28;
        month = month * 1;
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                day = 31;break;
            case 4:
            case 6:
            case 9:
            case 11:
                day = 30;break;
            default:
                //判断是否是闰年,闰年2月29，平年2月是28
                if(year%4==0 && year%100!=0 || year%400==0){
                    day = 29;
                }break;
        }
        //循环创建option节点并添加到select节点中
        for(i = 1;i <= day;i++){
            $("#day").append("<option>"+ (i < 10 ? '0' + i : i) +"</option>");
        }
        //页面加载时，希望年份默认选择当前年份
        $("#day option").filter(function(){
            return $(this).text() == nowDay;
        }).prop("selected",true);
    }
    /**
     * 清空表单
     */
    function clearForm(){
        var input = $("input:not(:button)");
        input.val(null);
        initYear();
        initMonth();
        var now = new Date();
        initDay(now.getFullYear(),now.getMonth()+1);
        $("#yes").prop("checked",true);
        //设置文本框获取焦点
        $("#productId").focus();
    }
    /**
     * 年份改变时，日期也改变
     */
    $("#year").change(function(){
        var year = $(this).find("option:selected").text();
        var month = $("#month").find("option:selected").text();
        initDay(year,month);
    });

    /**
     * 月份改变时，日期也改变
     */
    $("#month").change(function(){
        var month = $(this).find("option:selected").text();
        var year = $("#year").find("option:selected").text();
        initDay(year,month);
    });

    /**
     * 初始化页面
     */
    function initPage(){
        initMonth();
        initYear();
        var now = new Date();
        initDay(now.getFullYear(),now.getMonth()+1);
        // initDay($("#year option:selected").text(),$("#month option:selected").text());
    }
    initPage();

    /**
     * 表格加载方法
     */
    function loadInfo(){
        $.ajax({
            url:"goods.do",
            type:"post",
            dataType:"json",
            success:function(goodsList){
                $("tr:not(:first)").remove();
                $.each(goodsList,function(i,goods){
                    var tr = $("<tr align='center'></tr>");
                    var td1 = $("<td><input type='checkbox' class='chkMore'></td>");
                    var td2 = $("<td>"+goods.goodId+"</td>");
                    var td3 = $("<td>"+goods.goodName+"</td>");
                    var td4 = $("<td>"+goods.goodPrice+"</td>");
                    var td5 = $("<td>"+goods.goodDate+"</td>");
                    var td6 = $("<td><input type='checkbox' class='status'></td>");
                    var td7 = $("<td><span class='del'>删除</span> <span class='update'>修改</span> <span class='detail'>详情</span></td>");
                    td6.find(".status").prop("checked",goods.goodStatus==0?true:false);
                    tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7);
                    $("table").find("tbody").append(tr);
                });
                isCheckAll();
            }
        })
    }
    //调用表格加载
    loadInfo();

    //删除事件
    $("table").on("click",".del",function(){
        if(!confirm("确认删除？")){
            return;
        }
        var goodId = $(this).closest("tr").find("td:eq(1)").text();
        $.ajax({
            url:"del.do",
            type:"post",
            data:{
                goodId:goodId
            },
            success:function(data){
                if(data > 0){
                    loadInfo();
                }
            }
        })
    });

    function loadIndex(goodId){
        $.ajax({
            url:"getGood.do",
            type:"post",
            data:{
                goodId:goodId
            },
            dataType:"json",
            success:function(good){
                var dateArr = good.goodDate.split("-");
                $("#productId").val(good.goodId);
                $("#productName").val(good.goodName);
                $("#productPrice").val(good.goodPrice);
                $("#year option").filter(function(){
                    return $(this).text() == dateArr[0]
                }).prop("selected",true);
                $("#month option").filter(function(){
                    return $(this).text() == dateArr[1]
                }).prop("selected",true);
                $("#day option").filter(function(){
                    return $(this).text() == dateArr[2]
                }).prop("selected",true);
                good.goodStatus == 1 ?  $("#no").prop("checked",true): $("#yes").prop("checked",true)
            }
        })
    }

    /**
     * 点击修改加载输入框内容
     */
    $("table").on("click",".update",function(){
        $("#productId").prop("readonly",true);
        $(".forma input").attr("disabled",false);
        $(".forma select").attr("disabled",false);
        $(".title").text("商品修改");
        $(".addUpdate").val("修改");
        var goodId = $(this).closest("tr").find("td:eq(1)").text();
        loadIndex(goodId);
    });

    function addUpdate(local,msg){
        var y = $("#year option:selected").text();
        var m = $("#month option:selected").text();
        var d = $("#day option:selected").text();
        var status = $("#yes").prop("checked") ? "0" : "1";
        $.ajax({
            url:local,
            type:"post",
            data:{
                goodId:$("#productId").val(),
                goodName:$("#productName").val(),
                goodPrice:$("#productPrice").val(),
                goodDate:y+"-"+m+"-"+d,
                goodStatus:status
            },
            success:function(data){
                if(data > 0){
                    loadInfo();
                    clearInput();
                }else{
                    alert(msg);
                }
            }
        })
    }

    /**
     * 添加和修改按钮
     */
    $(".addUpdate").click(function(){
        var btnVal = $(this).val();
        if(btnVal == "修改"){
            addUpdate("update.do","您要修改的商品不存在!!!");
        }else{
            addUpdate("add.do","您要添加的商品已存在!!!");
        }
    });

    //清空表单
    function clearInput(){
        $("input:not(:button)").val(null);
        initYear();
        initMonth();
        var date = new Date();
        initDay(date.getFullYear(),date.getMonth());
        $("#yes").prop("checked",true);
    }

    //双击表单改添加功能
    $(".forma").dblclick(function(){
        $(".title").text("商品添加");
        $(".addUpdate").val("添加");
        $(".forma input").attr("disabled",false);
        $(".forma select").attr("disabled",false);
        $("#productId").prop("readonly",false);
        clearForm();
    });

    function isCheckAll(){
        //获取到全选复选框的checked属性
        var selAllCheck = $(".selAll").prop("checked");
        //获取到所有的删除复选框
        var sels = $(".chkMore");
        //对全选框的checked属性进行判断
        if(selAllCheck == true){
            sels.prop("checked",true);
        }else{
            sels.prop("checked",false);
        }
    }

    //全选事件绑定
    $(".selAll").change(function(){
        isCheckAll();
    });

    //当所有删除复选框选定后全选复选框选中事件
    $("table").on("click",".chkMore",function(){
        //当删除复选框有改变时获取到已选中的数量和总数量
        var selsLen = $(".chkMore").length;
        var selsCheckLen = $(".chkMore:checked").length;
        //获取到全选复选框
        var selAll = $(".selAll");
        //对已选中的数量和总数量进行判断 - 当选中数量等于中数量时全选复选框checked属性增加
        if(selsLen == selsCheckLen){
            selAll.prop("checked",true);
        }else{
            selAll.prop("checked",false);
        }
    });

    //批量删除事件
    $(".delMore").click(function(){
        $.ajax({
            url:"",
            type:"get",
        })
    });

    //详情按钮绑定
    $("table").on("click",".detail",function(){
        var goodId = $(this).closest("tr").find("td:eq(1)").text();
        loadIndex(goodId);
        $(".forma input").attr("disabled",true);
        $(".forma select").attr("disabled",true);
    });
</script>
</body>
</html>